<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>又拍云存储 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>又拍云存储</h1>
  <time datetime=2020-05-03T19:18:35Z class="post-date">Sun, May 3, 2020</time>
  <h1 id="又拍云存储">又拍云存储</h1>
<hr>
<h2 id="安装又拍云的控件">安装又拍云的控件</h2>
<p>pip install upyun</p>
<hr>
<h2 id="django接口">django接口</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e">#又拍云</span>
<span style="color:#f92672">import</span> upyun
<span style="color:#75715e">#定义文件上传类</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">YouPai</span>(View):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">post</span>(self,request):
        <span style="color:#75715e">#接受参数</span>
        img <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>FILES<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;file&#39;</span>)
        <span style="color:#75715e"># 生成独特的文件名</span>
        filename <span style="color:#f92672">=</span> make_password(img<span style="color:#f92672">.</span>name) <span style="color:#f92672">+</span> str((int(round(time<span style="color:#f92672">.</span>time() <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span>)))) <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;.jpg&#34;</span>
        <span style="color:#75715e"># 实例化对象</span>
        up <span style="color:#f92672">=</span> upyun<span style="color:#f92672">.</span>UpYun(<span style="color:#e6db74">&#39;md-admin&#39;</span>, username<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;a2925087209&#39;</span>, password<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;by0sFyYQ62GfZSIqCPVRXJLHlierRJsT&#39;</span>)
        headers <span style="color:#f92672">=</span> { <span style="color:#e6db74">&#39;x-gmkerl-rotate&#39;</span>: <span style="color:#e6db74">&#39;50&#39;</span> }
        <span style="color:#75715e"># 分块上传</span>
        <span style="color:#66d9ef">for</span> chunk <span style="color:#f92672">in</span> img<span style="color:#f92672">.</span>chunks():
            res <span style="color:#f92672">=</span> up<span style="color:#f92672">.</span>put(<span style="color:#e6db74">&#39;/</span><span style="color:#e6db74">%s</span><span style="color:#e6db74">&#39;</span><span style="color:#f92672">%</span>filename,chunk,checksum<span style="color:#f92672">=</span>True,headers<span style="color:#f92672">=</span>headers)
        <span style="color:#75715e">#返回结果</span>
        <span style="color:#66d9ef">return</span> HttpResponse(json<span style="color:#f92672">.</span>dumps({<span style="color:#e6db74">&#39;filename&#39;</span>:filename}),content_type<span style="color:#f92672">=</span><span style="color:#e6db74">&#39;application/json&#39;</span>)
</code></pre></div><hr>
<h2 id="vue接口">vue接口</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        <span style="color:#75715e">&lt;!--</span> <span style="color:#f92672">&lt;</span><span style="color:#e6db74">/img :src=&#34;src&#34; /</span><span style="color:#f92672">&gt;</span> <span style="color:#f92672">--&gt;</span>
        <span style="color:#a6e22e">又拍云存储</span><span style="color:#960050;background-color:#1e0010">：</span>&lt;<span style="color:#f92672">Avatar</span> <span style="color:#f92672">:src</span><span style="color:#e6db74">=&#34;yp_url&#34;</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;150&#39;</span> <span style="color:#a6e22e">fil</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;fill&#39;</span>&gt;&lt;/<span style="color:#f92672">Avatar</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;file&#34;</span> <span style="color:#f92672">@change</span><span style="color:#e6db74">=&#34;upload_upyun&#34;</span> /&gt;
        &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;upload&#34;</span>&gt;
            <span style="color:#a6e22e">拖拽上传</span>
        &lt;/<span style="color:#f92672">div</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span> () {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">yp_url</span> <span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
        }
    }
    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
    <span style="color:#75715e">//又拍云
</span><span style="color:#75715e"></span>    <span style="color:#75715e">//注册推托拽容器
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">upload</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;.upyun&#39;</span>);
    <span style="color:#75715e">//声明监听事件
</span><span style="color:#75715e"></span>    <span style="color:#75715e">//点击
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">upload</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;dragenter&#39;</span>, <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">onDrag</span>, <span style="color:#66d9ef">false</span>);
    <span style="color:#75715e">//悬停
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">upload</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;dragover&#39;</span>, <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">onDrag</span>, <span style="color:#66d9ef">false</span>);
    <span style="color:#75715e">//释放
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">upload</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;drop&#39;</span>, <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">onDrop</span>, <span style="color:#66d9ef">false</span>);
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#75715e">//又拍云上传
</span><span style="color:#75715e"></span>        <span style="color:#75715e">//监听鼠标
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">onDrag</span> (<span style="color:#a6e22e">e</span>) {
        <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">stopPropagation</span>();
        <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">preventDefault</span>();
        },
        <span style="color:#a6e22e">onDrop</span> (<span style="color:#a6e22e">e</span>) {
        <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">stopPropagation</span>();
        <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">preventDefault</span>();
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">upyun</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">dataTransfer</span>.<span style="color:#a6e22e">files</span>);
        },
        <span style="color:#75715e">//上传又拍云
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">upyun</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">files</span>){
            <span style="color:#75715e">//获取文件对象
</span><span style="color:#75715e"></span>        <span style="color:#75715e">//   let file = e.target.files[0];
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">file</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>];
            <span style="color:#75715e">//声明参数
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">param</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FormData</span>();
            <span style="color:#a6e22e">param</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;file&#39;</span>,<span style="color:#a6e22e">file</span>);

            <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">config</span> <span style="color:#f92672">=</span> {
            <span style="color:#a6e22e">headers</span><span style="color:#f92672">:</span> { <span style="color:#e6db74">&#39;Content-Type&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;multipart/form-data&#39;</span> }
            } 
            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>
            <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">post</span>(<span style="color:#e6db74">&#39;http://localhost:8000/youpai/&#39;</span>, <span style="color:#a6e22e">param</span>, <span style="color:#a6e22e">config</span>)<span style="color:#75715e">// 上传图片
</span><span style="color:#75715e"></span>            .<span style="color:#a6e22e">then</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">res</span>) {
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>)	
                <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">yp_url</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;http://md-admin.test.upcdn.net/&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">filename</span>
            });
        },

    },
}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
.<span style="color:#a6e22e">upload</span> {
  <span style="color:#a6e22e">margin</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">100</span><span style="color:#a6e22e">px</span> <span style="color:#a6e22e">auto</span>;
  <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">300</span><span style="color:#a6e22e">px</span>;
  <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">150</span><span style="color:#a6e22e">px</span>;
  <span style="color:#a6e22e">border</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">2</span><span style="color:#a6e22e">px</span> <span style="color:#a6e22e">dashed</span> <span style="color:#960050;background-color:#1e0010">#</span><span style="color:#a6e22e">f00</span>;
  <span style="color:#a6e22e">padding</span><span style="color:#f92672">-</span><span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span><span style="color:#a6e22e">px</span>;
  <span style="color:#a6e22e">padding</span><span style="color:#f92672">-</span><span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">80</span><span style="color:#a6e22e">px</span>;
}
&lt;/<span style="color:#f92672">style</span>&gt;


</code></pre></div><hr>
<h2 id="又拍云文件操作">又拍云文件操作</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#f92672">import</span> upyun
<span style="color:#75715e">#实例化</span>
up <span style="color:#f92672">=</span> upyun<span style="color:#f92672">.</span>UpYun(<span style="color:#e6db74">&#34;空间名&#34;</span>,<span style="color:#e6db74">&#39;操作员&#39;</span>,<span style="color:#e6db74">&#39;密码&#39;</span>)
<span style="color:#75715e">#读内存上传</span>
up<span style="color:#f92672">.</span>put(<span style="color:#e6db74">&#39;自定义文件名&#39;</span>,<span style="color:#e6db74">&#39;文件内容&#39;</span>)
<span style="color:#75715e">#文件流操作（节省内存）</span>
<span style="color:#66d9ef">with</span> open(<span style="color:#e6db74">&#39;文件路径/文件名&#39;</span>,<span style="color:#e6db74">&#39;rb&#39;</span>)<span style="color:#66d9ef">as</span> f:
    res <span style="color:#f92672">=</span> up<span style="color:#f92672">.</span>put(<span style="color:#e6db74">&#39;自定义文件名&#39;</span>,f,checksum<span style="color:#f92672">=</span>True)
<span style="color:#75715e">#目录操作</span>
up<span style="color:#f92672">.</span>mkdir(<span style="color:#e6db74">&#39;/文件夹名/&#39;</span>)
<span style="color:#75715e">#移动文件</span>
up<span style="color:#f92672">.</span>move(<span style="color:#e6db74">&#39;/文件路径/文件名&#39;</span>,<span style="color:#e6db74">&#39;/新文件路径/文件名&#39;</span>)
<span style="color:#75715e">#复制文件</span>
up<span style="color:#f92672">.</span>copy(<span style="color:#e6db74">&#39;/文件路径/文件名&#39;</span>,<span style="color:#e6db74">&#39;/新文件路径/文件名&#39;</span>)
<span style="color:#75715e">#断点续传</span>
<span style="color:#66d9ef">with</span> open(<span style="color:#e6db74">&#39;文件路径/文件名&#39;</span>,<span style="color:#e6db74">&#39;rb&#39;</span>)<span style="color:#66d9ef">as</span> f:
    res <span style="color:#f92672">=</span> up<span style="color:#f92672">.</span>put(<span style="color:#e6db74">&#39;自定义文件名&#39;</span>,f,checksum<span style="color:#f92672">=</span>True<span style="color:#960050;background-color:#1e0010">，</span>need_resume<span style="color:#f92672">=</span>True)
<span style="color:#75715e">#下载</span>
res <span style="color:#f92672">=</span> up<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;/文件路径/文件名&#39;</span>)
<span style="color:#75715e">#删除</span>
up<span style="color:#f92672">.</span>delete(<span style="color:#e6db74">&#39;/文件路径/文件名&#39;</span>)
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
